/*
 * @Author       : 魏威 <1209562577@qq.com>
 * @Date         : 2022-02-10 17:20 周4
 * @Description  :
 */
import styled from "@emotion/styled";
import { Typography } from "antd";
import { useProjectSearchParams } from "hooks/project";
import { useProjects } from "hooks/useProjects";
import { useUsers } from "hooks/useUsers";
import React from "react";
import { useDebounce } from "utils";
import List from "./list";
import SearchPanel from "./search-panel";

export default function ProjectListScreen() {
  const [projectsParams, setParam] = useProjectSearchParams();
  const {
    data: list,
    error,
    isLoading: tableLoading,
  } = useProjects(useDebounce(projectsParams, 200));

  const { data: users } = useUsers();

  return (
    <Container>
      <h1>项目列表</h1>
      <SearchPanel
        param={projectsParams}
        setParam={setParam}
        users={users || []}
      />
      {error && (
        <Typography.Text type={"danger"}>{error.message}</Typography.Text>
      )}
      <List
        dataSource={list || []}
        loading={tableLoading}
        users={users || []}
      />
    </Container>
  );
}

ProjectListScreen.whyDidYouRender = true;

const Container = styled.div`
  padding: 3.2rem;
`;
